<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
		<link href="displayStyle.css" rel="stylesheet"/>
	</head>
	<body>
		<!--
		元素的显示：
		 1.块元素block  
		  比较霸道，单独占一行
		  默认的宽度和父级元素宽度的100%
		  可以给盒子设置宽，高
		  可以设置对齐属性
		  块元素内可以包含行内元素或块元素
		 2.行内元素inline
		   一行显示多个
		   默认的宽度就是内容的宽度
		   宽，高属性无效
		   不能设置对齐属性
		   行内元素只包含文本或其他行内元素
		   span，a，del，strong，
		 3.行内块元素inline-block
		    一行显示多个，两个行内块元素之间有一定的空白间距
			默认的宽度就是内容的宽度
			可以给盒子设置宽、高
			input，img，td
		  元素显示模式的转换：
			display：模式的名称；
		   -->
		<div clas="box">hello box</div>
		<p class="box"> hello 段落</p>
		<h1>一级标题</h1>
		<span class="box">hello</span>
		<del>删除线</del>
		<a herf=""></a>
	</body>
</html>
